<template>
  <div class="common_page rankList_wrap">
    <div class="rank_head">
      <div class="img_wrap">
        <img src="../../../assets/images/ranking.png" alt="" />
      </div>
      <div class="vote_title">
        {{ voteInfo.title }}
      </div>
      <div class="drop_group" v-if="groupList.length">
        <el-dropdown>
          <span class="el-dropdown-link">
            {{ groupName }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="handleChangeGroup({ id: 0 })"
              >全部</el-dropdown-item
            >
            <el-dropdown-item
              @click.native="handleChangeGroup(item)"
              v-for="(item, index) in groupList"
              :key="index"
              >{{ item.name }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div>
      <el-table :data="playerList" style="width: 100%">
        <el-table-column label="排行" width="80" align="center">
          <template slot-scope="scope">
            <img
              v-if="scope.$index == 0 && query.pageNum == 1"
              src="./../../../assets/images/one.png"
              alt=""
            />
            <img
              v-else-if="scope.$index == 1 && query.pageNum == 1"
              src="./../../../assets/images/two.png"
              alt=""
            />
            <img
              v-else-if="scope.$index == 2 && query.pageNum == 1"
              src="./../../../assets/images/three.png"
              alt=""
            />
            <span v-else style="color: #ee6869; font-size: 18px">{{
              (query.pageNum - 1) * query.pageSize + (scope.$index + 1)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="选手" width="400">
          <template slot-scope="scope">
            <div class="player_warp">
              <div class="img_warp">
                <img
                  v-if="scope.row.coverLink"
                  :src="scope.row.coverLink"
                  alt=""
                />
                <img v-else src="../../../assets/images/cover.png" alt="" />
              </div>
              <div class="word_warp">
                <div class="playerName">
                  <span class="number">{{ scope.row.number }}号</span>
                  <span class="name">{{ scope.row.name }}</span>
                </div>
                <span class="title">{{ scope.row.introduction }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="groupList.length"
          label="选手分组"
          width="260px"
          align="center"
        >
        <template slot-scope="scope">
          <div>{{filterGroup(scope.row.contestantGroupId)}}</div>
        </template>
        </el-table-column>
        <el-table-column prop="vc" label="票数" align="center">
        </el-table-column>
        <el-table-column prop="pv" label="浏览量" align="center">
        </el-table-column>
      </el-table>
      <div class="pagination_wrap" v-if="total">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :page-size="query.pageSize"
          :total="total"
          :current-page="query.pageNum"
          @current-change="handleChangePage"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      query: {
        pageNum: 1,
        pageSize: 10,
        voteId: this.$route.query.id,
      },
      playerList: [],
      voteInfo: {},
      groupList: [],
      groupName: "全部",
      total: 0,
    };
  },
  created() {
    this.getRankingList();
    this.getActDetail();
    this.getGroup();
  },
  methods: {
    filterGroup(id) {
      let item = this.groupList.find((item) => item.id == id);
      return item ? item.name : "无";
    },
    handleChangePage(val) {
      this.query.pageNum = val;
      this.getRankingList();
    },
    getRankingList() {
      this.$api("player.getRankingList", this.query).then((res) => {
        this.playerList = res.data;
        this.total = res.count;
      });
    },
    //获取活动信息
    getActDetail() {
      this.$api("vote.actById", {
        id: this.$route.query.id,
      }).then((res) => {
        this.voteInfo = res;
      });
    },
    //分组信息
    getGroup() {
      this.$api("player.getGroup", {
        voteId: this.$route.query.id,
      }).then((res) => {
        this.groupList = res;
      });
    },
    handleChangeGroup(item) {
      console.log(item);
      if (item.id) {
        this.query.contestantGroupId = item.id;
      } else {
        delete this.query.contestantGroupId;
      }
      this.getRankingList();
    },
  },
};
</script>
<style lang="scss" scoped>
.rankList_wrap {
  .pagination_wrap {
    margin-top: 20px;
  }
  .rank_head {
    position: relative;
    height: 64px;
    .img_wrap {
      position: absolute;
      left: -20px;
      top: -20px;
      width: 88px;
      height: 85px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .vote_title {
      text-align: center;
    }
    .drop_group {
      position: absolute;
      top: 15px;
      right: 20px;
    }
  }
  .player_warp {
    display: flex;
    .img_warp {
      width: 50px;
      height: 50px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .word_warp {
      margin-left: 20px;
      .playerName {
        .number {
          color: #999;
        }
        .name {
          margin-left: 10px;
          color: #333;
        }
      }
      .title {
        color: #999;
      }
    }
  }
}
</style>